import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import PropTypes from 'prop-types'
import LinearGradient from 'react-native-linear-gradient'
import { LinearTextGradient } from 'react-native-text-gradient'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import CustomBoxShadow from 'src/components/boxshadow/CustomBoxShadow'
import OpenBtnRound from './OpenBtnRound'
import CheckButton from 'src/components/check-button/index'
import { showModal } from 'src/utils/ModalUtil'

export class OpenModalContent extends React.PureComponent {
  state = {
    indexActive: 0,
    ruleChecked: this.props.ruleChecked
  }

  ruleCheck = () => {
    this.setState({
      ruleChecked: !this.state.ruleChecked
    }, () => {
      this.props.ruleCheck()
    })
  }

  onConfirm = () => {
    this.props.onConfirm && this.props.onConfirm(this.state.indexActive)
  }

  itemClick = indexActive => {
    this.setState({
      indexActive
    })
  }

  render () {
    const { config, ruleCheck, ruleClick } = this.props
    const { indexActive, ruleChecked } = this.state
    return (
      <View style={styles.container}>
        <View style={styles.titleWrap}>
          <CustomImage source={require('@/imgC/member/crown.png')} />
          <Text style={styles.titleLabel}>升级会员</Text>
        </View>
        <View style={styles.itemCont}>
          {config.map((item, index) => (
            <CustomButton
              key={`modalVipItem${item.id}`}
              style={styles.itemBtn}
              params={index}
              onPress={this.itemClick}
            >
              <CustomBoxShadow style={styles.itemShaow}>
                <View
                  style={[
                    styles.itemWrap,
                    indexActive === index && styles.itemWrapActive
                  ]}
                >
                  <LinearGradient
                    start={{ x: 0, y: 0 }}
                    end={{ x: 0, y: 1 }}
                    colors={
                      indexActive === index
                        ? ['#65D797', '#5DC9C5']
                        : ['#CCCCCC', '#CCCCCC']
                    }
                    style={[styles.itemTitleWrap]}
                  >
                    <Text style={styles.itemTitle1}>
                      {item.nameZh}
                      <Text style={styles.itemTitle2}>{item.nameEn}</Text>
                    </Text>
                  </LinearGradient>
                  <View style={styles.priceWrap}>
                    <LinearTextGradient
                      style={styles.price1}
                      locations={[0, 1]}
                      colors={['#65D797', '#5DC9C5']}
                      start={{ x: 0, y: 0 }}
                      end={{ x: 0, y: 1 }}
                    >
                        ¥
                    </LinearTextGradient>
                    <LinearTextGradient
                      style={styles.price2}
                      locations={[0, 1]}
                      colors={['#65D797', '#5DC9C5']}
                      start={{ x: 0, y: 0 }}
                      end={{ x: 0, y: 1 }}
                    >
                      {item.price}
                    </LinearTextGradient>
                  </View>
                  <Text style={styles.originalPrice}>
                      ¥{item.originalPrice}
                  </Text>
                </View>
              </CustomBoxShadow>
            </CustomButton>
          ))}
        </View>
        <OpenBtnRound onClick={this.onConfirm} style={styles.openBtn} />
        <View style={styles.bottomWrap} >
          <CustomButton style={styles.checkWrap} onPress={ruleCheck}>
            <CheckButton
              onPress={this.ruleCheck}
              checked={ruleChecked}
            />
            <Text style={styles.checkText}>已阅读并同意</Text>
          </CustomButton>
          <Text onPress={ruleClick} style={styles.ruleText}>
              《人职初会员协议》
          </Text>
        </View>
      </View>
    )
  }
}

OpenModalContent.propTypes = {
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
  config: PropTypes.array.isRequired,
  ruleChecked: PropTypes.bool,
  ruleCheck: PropTypes.func,
  ruleClick: PropTypes.func
}
export default function OpenModal (props) {
  return showModal(
    <OpenModalContent {...props}/>
  )
}
const styles = StyleSheet.create({
  container: {
    width: ScaleS(363),
    paddingTop: ScaleS(25),
    marginBottom: ScaleS(6),
    backgroundColor: '#FFFFFF',
    borderRadius: ScaleS(12),
    alignSelf: 'center',
    alignItems: 'center'
  },

  titleWrap: {
    marginBottom: ScaleS(22),
    height: ScaleS(34),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  titleLabel: {
    marginLeft: ScaleS(6),
    color: '#444444',
    fontSize: ScaleT(24),
    fontWeight: '300'
  },
  itemCont: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center'
  },
  itemBtn: {
    margin: ScaleS(8)
  },
  itemShaow: {
    width: ScaleS(97),
    height: ScaleS(118),
    borderRadius: ScaleS(5),
    shadowRadius: ScaleS(15),
    shadowOpacity: 0.07,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: ScaleS(2)
    }
  },
  itemWrap: {
    width: ScaleS(97),
    height: ScaleS(118),
    borderRadius: ScaleS(5),
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: ScaleS(18)
  },
  itemWrapActive: {
    backgroundColor: '#E3F3ED',
    borderStyle: 'solid',
    borderWidth: ScaleS(1),
    borderColor: '#61d0ae'
  },
  itemTitleWrap: {
    width: ScaleS(68),
    height: ScaleS(20),
    borderRadius: ScaleS(14),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  itemTitle1: {
    color: '#FFFFFF',
    fontSize: ScaleT(12),
    fontWeight: '600'
  },
  itemTitle2: {
    color: '#FCF4C4'
  },
  priceWrap: {
    height: ScaleS(32),
    marginTop: ScaleS(10),
    marginBottom: ScaleS(6),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'baseline'
  },
  price1: {
    color: '#FFFFFF',
    fontSize: ScaleT(12),
    fontWeight: '600'
  },
  price2: {
    color: '#FFFFFF',
    fontSize: ScaleT(28),
    lineHeight: ScaleS(32),
    fontWeight: 'bold',
    letterSpacing: ScaleS(-1)
  },
  originalPrice: {
    color: '#666666',
    fontSize: ScaleT(12),
    fontWeight: '400',
    textDecorationLine: 'line-through',
    textDecorationStyle: 'solid',
    textDecorationColor: '#666666'
  },
  openBtn: {
    marginTop: ScaleS(24)
  },
  bottomWrap: {
    alignSelf: 'center',
    height: ScaleS(50),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  checkWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  checkText: {
    paddingHorizontal: ScaleS(11),
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#444444'
  },
  ruleText: {
    fontSize: ScaleT(12),
    fontWeight: '400',
    color: '#DBB576'
  }
})
